import React, { Component } from 'react'
import { StatusBar, DeviceEventEmitter, BackHandler, RefreshControl, ScrollView, View, Text} from 'react-native'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import Icon from 'react-native-vector-icons/FontAwesome'
import Button from '../Components/Button'

import TodayRecommend from '../Components/TodayRecommend'

import { connect } from 'react-redux'

import OrderList from '../Components/OrderList'

import OrderActions from '../Redux/OrderRedux'

// Styles
import styles from './Styles/OrderScreenStyle'

class OrderScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      code: 'normal',
      refreshing: false,
      statusList: [
        {name:'进行中',code:'normal'},
        {name:'已完成',code:'finished'},
        {name:'退款中',code:'refund'}
      ]
    }
  }
  static navigationOptions = {
    title: '订单',
    headerStyle: {elevation:0},
    tabBarLabel: '订单',
    tabBarIcon: ({tintColor}) =>
      <Icon name='list-alt' color={tintColor} size={24} />
  }
  componentWillMount() {
    DeviceEventEmitter.addListener('refreshOrderList', (e)=>this.props.getOrder(this.props.token, this.state.code))
  }
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', ()=>{
      StatusBar.setTranslucent(false)
      StatusBar.setBarStyle('dark-content')
      StatusBar.setBackgroundColor('white')
    })
    this.props.getOrder(this.props.token, this.state.code)
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevProps.order.fetching
      && prevState.refreshing
      && !this.props.order.error) {
      this.setState({refreshing:false})
    }
    if(prevState.code !== this.state.code) {
      this.props.getOrder(this.props.token, this.state.code)
    }
    //if(prevProps.orderDetail.payload
    //  && this.props.orderDetail.payload
    //  && prevProps.orderDetail.payload.status
    //  !== this.props.orderDetail.payload.status) {
    //  this.props.getOrder(this.props.token, this.state.code)
    //}
  }
  componentWillUnmount() {
    this._navListener.remove();
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  _onRefresh() {
    this.setState({refreshing:true})
    this.props.getOrder(this.props.token)
  }
  _setCode(i) {
    let code = 'normal'
    if (i === 1) {
      code = 'finished'
    } else if (i === 2) {
      code = 'refund'
    }
    this.setState({code:code})
  }
  render () {
    const { navigate } = this.props.navigation
    const emptyView = (
      <View>
        <View style={{paddingTop:40,paddingBottom:30,alignItems:'center'}}>
          <Text>您还没有相关订单</Text>
        </View>
        <View style={{flexDirection:'row',justifyContent:'center'}}>
          <View style={{padding:10}}>
            <Button title='看师傅' onPress={()=>navigate('ServerScreen')} />
          </View>
          <View style={{padding:10}}>
            <Button title='看项目' onPress={()=>navigate('CommodityScreen')} />
          </View>
        </View>
        <Text
          style={{textAlign:'center',marginTop:20,marginBottom:10,fontSize:18}}>
          <Icon name='heart-o' color='#F24D16' />  猜你喜欢</Text>
        <TodayRecommend
          navigation={this.props.navigation}
          data={this.props.recommend} />
      </View>
    )
    return (
      <ScrollableTabView
        onChangeTab={({i})=>this._setCode(i)}
        tabBarActiveTextColor='#4CD4B0'
        tabBarUnderlineStyle={{
          backgroundColor:'#4CD4B0',height:2}}
        tabBarBackgroundColor='white'>
        {this.state.statusList.map(({name, code}) =>
          <ScrollView
            key={code}
            tabLabel={name}
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh.bind(this)}
              />
            }
            style={styles.tabContainer}>
            {this.props.order.payload[code] ? (
              <OrderList
                navigation={this.props.navigation}
                data={this.props.order.payload[code]} />
            ) : (
              emptyView
            )}
          </ScrollView>
        )}
      </ScrollableTabView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
    order: state.order,
    //orderDetail: state.orderDetail,
    recommend: state.todayRecommend.payload,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getOrder: (token,code) => dispatch(OrderActions.orderRequest(token,code))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(OrderScreen)
